<template>
  <!-- 基本表单验证
        表单元素的值绑定
        el-form
            model
            rules
        el-form-item
            prop
       自定义表单验证
          rules:{
              prop的值:[
              ......,
              validator:(rule,value,callback)=>{
                // rule
                // value:当前项的值
                // callback  验证通过  callback()   验证失败 callback(new Error('错误信息'))
              }

              ]

          }

       部门负责人
          a:定义接口api
          b:导入接口api
          c:点击选项时调用接口获取数据
          d:存储并渲染
 -->

  <!--

  const obj={'add':'新增部门',edit:'编辑部门'，xxx:'xxx部门'}
  const mode='add'
  obj[mode]
  {'add':'新增部门',edit:'编辑部门'，xxx:'xxx部门'}[mode]
  -->

  <!-- :title="mode === 'add' ? '新增部门' : '编辑部门'" -->
  <el-dialog
    :title="{ add: '新增部门', edit: '编辑部门' }[mode]"
    width="600px"
    :visible.sync="isShow"
    @close="closeEvent"
  >
    <!-- <h3>{{ form }}</h3> -->
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model.trim="form.name" placeholder="2-50个字符" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model.trim="form.code" placeholder="2-50个字符" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <el-select
          v-model="form.manager"
          placeholder="请选择负责人"
          @focus="focusEvent"
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input
          v-model.trim="form.introduce"
          type="textarea"
          :rows="4"
          placeholder="1-300个字符"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="center">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import {
  sysUserSimple,
  companyDepartmentPost,
  companyDepartmentPut
} from '@/api/departments'
export default {
  props: {
    initList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      mode: '', // add:新增  edit:编辑
      isShow: false,
      val: '1',
      userList: [],
      form: {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      },
      rules: {
        name: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 2,
            max: 50,
            message: '请输入2-50个字符',
            trigger: 'change'
          },
          {
            validator: (rule, value, callback) => {
              let arr = []
              if (this.mode === 'add') {
                // rule:规则，
                // value:当前项的值
                // callback 通过  callback()   不通过  callback(new Error('错误信息'))
                // 1:找出当前待添加项的兄弟项
                arr = this.initList.filter((item) => item.pid === this.form.pid)
              } else if (this.mode === 'edit') {
                // 1:找出当前待添加项的兄弟项排除自己
                arr = this.initList.filter(
                  (item) =>
                    item.pid === this.form.pid && item.id !== this.form.id
                )
              }
              //   2:判断名字不重复
              //   const bol = arr.every((item) => item.name !== value)
              // some:只要有一个满足条件，它就是true
              const bol = arr.some((item) => item.name === value)
              bol
                ? callback(new Error('请不要输入重复的部门名称:' + value))
                : callback()
            },
            trigger: 'change'
          }
        ], //	string	非必须		部门名称
        code: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 2,
            max: 50,
            message: '请输入2-50个字符',
            trigger: 'change'
          },
          {
            validator: (rule, value, callback) => {
              let bol = true
              if (this.mode === 'add') {
                // 验证value的值不在部门列表数据内
                // [{code:'123'}]   value:'123'
                //    every:所有项都满足条件它就是true
                bol = this.initList.every((item) => item.code !== value)
              } else if (this.mode === 'edit') {
                // 1:原始数组排除自己
                const arr = this.initList.filter(
                  (item) => item.id !== this.form.id
                )
                // 2:验证重名
                bol = arr.every((item) => item.code !== value)
              }
              bol ? callback() : callback(new Error('部门编码已存在:' + value))
            },
            trigger: 'change'
          }
        ], //	string	非必须		部门编码，同级部门不可重复
        manager: [{ required: true, message: '必填', trigger: 'change' }], //	string	非必须		负责人名称
        introduce: [
          { required: true, message: '必填', trigger: 'change' },
          {
            min: 1,
            max: 300,
            message: '请输入2-50个字符',
            trigger: 'change'
          }
        ] //	string	非必须		介绍
      }
    }
  },
  /*
    侦听器:某个值的change事件
      watch:{
        "isShow":{
          handler(newVal,oldVal){
            newVal:当前值
            oldVal:修改上一刻的值
          }，
          deep:默认是false（默认只侦听栈的变化）,true(侦听的值堆与栈的变化都侦听),
          immediate:false   true(定义时就立马执行一次handler)
        }
      }
  */
  // watch: {
  //   isShow: {
  //     handler(newVal) {
  //       if (newVal === false) {
  //         // 重置表单
  //         this.$refs.form.resetFields()
  //       }
  //     }
  //   }
  // },

  methods: {
    // 重置表单
    closeEvent() {
      // 重置表单数据成初始值（初次渲染时的值）
      this.$refs.form.resetFields()
      // 手动重置
      this.form = {
        name: '', //	string	非必须		部门名称
        code: '', //	string	非必须		部门编码，同级部门不可重复
        manager: '', //	string	非必须		负责人名称
        introduce: '', //	string	非必须		介绍
        pid: '' //	string	非必须		父级部门ID
      }
    },
    submit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          if (this.mode === 'add') {
            await companyDepartmentPost(this.form)

            // 清空表单数据
            // this.$refs.form.resetFields()
            // 提示
            this.$message.success('新增成功')
          } else if (this.mode === 'edit') {
            await companyDepartmentPut(this.form)
            this.$message.success('编辑成功')
          }
          // 关闭弹框
          this.isShow = false
          // 刷新父级列表
          // 子传父  <子组件标签 @方法名="父组件方法" />  this.$emit('方法名',实参值)
          this.$emit('getData')
        }
      })
    },
    // 点击员工
    async focusEvent() {
      if (this.userList.length === 0) {
        const res = await sysUserSimple()
        // 存储数据
        this.userList = res.data
        console.log(res)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.center {
  text-align: center;
}
</style>
